// 柱状图组件
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';
const BarChart = ({title})=>{
    const charRef = useRef(null)
    useEffect(()=>{     
        //保证dom可用 才进行图表的渲染
        // 1.获取渲染图表的dom节点
    //    const chartDom = document.getElementById('main');
        const chartDom = charRef.current
        // 2.图表初始化生成图表实例对象 
        const myChart = echarts.init(chartDom);

        // 3.准备图表参数
        const option = {
        title:{
            text:title
        },
        xAxis: {
            type: 'category',
            data: ['Vue','React','Angular']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [10,40,70],
            type: 'bar'
            }
        ]
        };
        // 4.使用参数完成图表的渲染
        option && myChart.setOption(option);
    },[])
    return <div ref={charRef} style={{width:'500px' , height:'400px'}}></div>
}

export default BarChart